<template>
	<view class="content" :style="theme">
		<view class="ul">
			<view class="li" v-for="(item, index) in list" :key="index">
				<view class="title">
					<!-- <text class="hon"></text> -->
					<text>{{item.name}}</text>
					<text v-if="item.age" class="age">{{item.age}}岁</text>
					<!-- <text :class="item.sex== '1'?'blue':'red'">{{item.sex== '1'?'男':item.sex== '2'?'女':'保密'}}</text> -->
					<image v-if="item.sex == 1" :src="imgHost+'/ic_boy.png'"></image>
					<image v-if="item.sex == 2" :src="imgHost+'/ic_girl.png'"></image>
				</view>
				<view class="idCard flex-cb">
					<view><text class="label">证件号码</text>{{item.idCard?item.idCard:'-'}}</view>
					<view class="cz flex-cb">
						<image :src="imgHost+'/edit.png'" @click="jumps(item)">
						</image>
						<view></view>
						<image :src="imgHost+'/del.png'" @click="delBtn(item)"></image>
					</view>
				</view>
				<view class="birthday"><text class="label">出生日期</text>{{item.birthday || '-'}}</view>
			</view>
		</view>
		<u-loadmore v-if="end && list.length >= 10" :status="status" line />
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无数据～</view>
		</view>
		<view class="bottomState">
			<view class="footBtn" @click="jump('/pages/member/addStudent')">新增人员</view>
		</view>
		<u-overlay :show="show">
			<view class="wrapper">
				<view class="block">
					<view class="block_title">提示</view>
					<view class="block_info">是否确定删除此人员</view>
					<view class="block_footer">
						<view class="block_footer_a" @click="onClickHide">取消</view>
						<view class="block_footer_b" @click="qrbtn">确定</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				status: 'nomore',
				page: 1,
				show: false,
				end: false,
				noMore: false,
				firstQueryTime: '',
				id: ''
			}
		},
		onShow() {
			this.page = 1
			this.list = []
			this.end = false
			this.firstQueryTime = this.$app.firstQueryTime()
			this.getList()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			jumps(e) {
				let li = e
				let currentDate = ''
				if(li.birthday) {
					currentDate = String(li.birthday)
					currentDate = currentDate.replace(/-/g, "/")
					currentDate = new Date(currentDate).getTime()
				}
				uni.navigateTo({
					url: `/pages/member/addStudent?id=${li.id}&sex=${li.sex}&xyname=${li.name}&currentDate=${currentDate}&idCard=${li.idCard}&birthday=${li.birthday}&showAvatar=${li.showAvatar}`
				})
			},
			delBtn(e) {
				this.id = e.id
				this.show = true
			},
			onClickHide() {
				this.show = false
			},
			qrbtn() {
				this.$app.ajax({
					api: this.$api.studentDel(),
					data: {
						userId: this.userInfo.id,
						param: {
							id: this.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.$app.showToast('删除成功')
						this.page = 1
						this.list = []
						this.show = false
						this.end = false
						this.getList()
					}
				}).catch(() => {})
			},
			getList() {
				this.$app.ajax({
					api: this.$api.studentList(),
					data: {
						pagination: {
							page: this.page,
							firstQueryTime: this.firstQueryTime,
							rows: 15
						},
						param: {}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						if (!res.recordList || res.recordList.length < 15) {
							this.end = true
						}
						if (res.recordList) {
							this.list = this.list.concat(res.recordList)
						}
					}
				}).catch(() => {})
			},
			reachBottom() {
				if (!this.end) {
					this.page += 1;
					this.getList();
				}
			},
			// 触底加载更多数据
			onReachBottom(e) {
				this.reachBottom()
			}

		}

	}
</script>


<style scoped lang="scss">
	.content {
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}

	.li {
		background-color: #ffffff;
		border-radius: 16rpx;
		width: 690rpx;
		margin: 30rpx auto;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.title {
		color: #222222;
		font-size: 30rpx;
		line-height: 36rpx;
		display: flex;
		align-items: center;
		height: 46rpx;
		position: relative;
		font-weight: Medium;
		.age {
			color: $color;
			border-radius: 4rpx;
			line-height: 36rpx;
			height: 36rpx;
			background: $color2;
			display: inline-block;
			padding: 0 12rpx;
			font-size: 22rpx;
			margin-left: 16rpx;
		}
		.blue {
			color: #4167C1;
			margin-left: 16rpx;
			border-radius: 4rpx;
			font-weight: normal;
			line-height: 45rpx;
			padding: 0 20rpx;
			font-size: 22rpx;
			border: 1px solid #4167C1;
		}
		image {
			width: 36rpx;
			height: 36rpx;
			margin-left: 10rpx;
		}
	}
	.idCard,
	.birthday {
		color: #333333;
		font-size: 24rpx;
		line-height: 48rpx;
		height: 48rpx;
		margin-top: 10rpx;
	}

	.idCard .label,
	.birthday .label {
		color: #666666;
		display: inline;
		margin-right: 20rpx;
	}

	.cz {
		width: 150rpx;
		height: 48rpx;
	}

	.cz image {
		width: 48rpx;
		height: 48rpx;
	}

	.cz view {
		height: 48rpx;
		width: 1px;
		background-color: #E5E5E5;
	}



	.bottomState {
		width: 100%;
		padding: 30rpx;
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		z-index: 99;
	}
</style>
